<template>
  <div class='container' v-loading="loading">
    <!-- *********************顶部****************************** -->
    <el-form :inline="true" :model="form" class="demo-form-inline" size="medium">
      <el-row>
        <el-col :span="16">
          <el-form-item label="学科名称">
            <el-input v-model="form.subjectName"></el-input>
          </el-form-item>
          <el-form-item class="margin-top">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="loadList">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align:right">
          <el-button icon="el-icon-edit" type="success" @click="handleAdd" v-model="add.name">学科</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- **********************数据总数**************************** -->
    <el-alert title="数据一共 10 条" type="info" show-icon></el-alert>
    <!-- **********************内容表格**************************** -->

    <!-- 标题 -->
    <el-table style="width: 100%" :data="list">
      <el-table-column type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="subjectName" label="学科名称">
      </el-table-column>
      <el-table-column prop="username" label="创建者">
      </el-table-column>
      <el-table-column prop="addDate" label="创建日期">
      </el-table-column>
      <el-table-column prop="isFrontDisplay" label="前台是否显示">
      </el-table-column>
      <el-table-column prop="creatorID" label="二级目录">
      </el-table-column>
      <el-table-column prop="tags" label="标签">
      </el-table-column>
      <el-table-column prop="totals" label="题目数量">
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template v-slot="{row}">
          <el-button type="text" @click="$router.push('/subjects/directorys')">学科分类</el-button>
          <el-button type="text" @click="$router.push('/subjects/tags')">学科标签</el-button>
          <el-button type="text" @click="handleUpdate(row)">修改</el-button>
          <el-button type="text" @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination background layout="->,prev, pager, next,sizes,jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[2, 10, 20, 50]" :page-size="form.pagesize"></el-pagination>
    </div>

    <subjects-add :formda="form5" :isShowDept.sync="isShowDept" :form="add" :operate-type="operateType" @toggle-box="toggleBox" />
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects.js'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  name: 'Subjects',
  components: { SubjectsAdd },
  data () {
    return {
      total: 0,
      // 页面
      // pg: {
      //   page: 1,
      //   pagesize: 10
      // },
      // 操作类型
      operateType: 'add',
      // 加载状态
      laoding: false,
      // 添加列表
      add: {
        name: ''

      },
      // 控制部门弹窗标志位
      isShowDept: false,
      // 渲染表单参数
      form: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      // form1: {
      //   subjectName: ''
      // },
      // 表单同步
      ipt: '',
      // 渲染列表
      list: [],
      form5: {}
    }
  },
  created () {
    this.loadList()
  },
  methods: {

    // 监听页码的变化
    handleSizeChange (val) {
      this.form.pagesize = val
      // 重新带着最新的对象，获取一次最新的每页几条数据
      this.form.page = 1
      this.loadList()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.loadList()
    },
    // 显示弹窗
    toggleBox (info) {
      console.log(info)
    },
    // 修改
    async handleUpdate (row) {
      // 显示弹窗
      this.isShowDept = true
      this.form5 = row
      // 刷新列表
      this.loadList()
    },
    // 添加
    handleAdd () {
      // 添加部门，显示弹窗
      this.isShowDept = true
      // 刷新列表
      this.loadList()
    },
    // 删除
    async handleDel (row) {
      try {
        const ret = await this.$confirm('确认要删除该学科吗', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 点击取消
        if (ret === 'cancel') return
        // 点击确认操作，调用接口
        const delRet = await remove(row)
        if (delRet.status === 200) {
          // 删除成功
          this.$message.success('删除角色成功')
          this.loadList()
        }
      } catch {
        this.$message.error('删除角色失败')
      }
    },
    // 清除
    clear () {
      this.form.user = ''
    },
    // 展示列表
    async loadList () {
      try {
        const ret = await list(this.form)
        console.log(ret)
        this.total = ret.data.counts
        this.list = ret.data.items
      } catch (e) {
        this.$message.error('获取失败')
      } finally {
        this.loading = false
      }
    }

  }
}
</script>

<style scoped>
.container {
  background-color: #fff;
}
</style>
